<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环调用</title>
    <link rel="stylesheet" href="http://t.weikuw.com/Public/Agent/css/H-ui.min.css">
    <style>
        #store_area .select-box{ width:150px;}
        #store_area [data-id]{ margin-bottom:5px;}
        #store_area [data-id]:last-child{ margin-bottom:0;}
        #store_area .del{ cursor:pointer;}
    </style>
</head>
<body>
    <div class="row cl">
		<label class="form-label col-2">门店区域:</label>
		<div class="formControls col-8">
			<div class="mt-18 skin-minimal">
				<div id="store_area" style="display:inline-block;">
					<div data-id="0">
						<span class="select-box">
							<select class="select" data-name="province">
								<option value="0">请选择</option>
							</select>
						</span>
						<span class="select-box">
							<select class="select" data-name="city">
								<option value="0">请选择</option>
							</select>
						</span>
						<span class="select-box">
							<select class="select" data-name="district">
								<option value="0">请选择</option>
							</select>
						</span>
						<span class="select-box">
							<select class="select" data-name="street">
								<option value="0">请选择</option>
							</select>
						</span>
					</div>
				</div>
			</div>
		</div>
		<div class="col-2">
			<span class="btn btn-success" id="add_store" style="vertical-align:top;">添加新门店</span>
		</div>
	</div>

    <!-- <input type="color"> -->

<script src="http://cache.weikuw.com/tpl/static/lib/js/jquery-2.1.1.min.js"></script>
<script src="dish/multistageTandem.min.js"></script>
<!-- <script src="dish/multistageTandem.js"></script> -->
<!-- <script src="dish/weui_city.js"></script> -->
<script src="dish/level_street.js"></script>
<script>
    var store_area = {
		id: 0,
		$html: null,
		store_address: [
            "内蒙古自治区-呼和浩特市-新城区-海拉尔东路街道",
            "湖南省-长沙市-芙蓉区-文艺路街道",
            "安徽省-合肥市-瑶海区-明光路街道",
            "内蒙古自治区-呼和浩特市-新城区-新城区鸿盛高科技园区"
        ],
		init(){
			let _this = this;
			this.id = $('[data-id]:last').data('id');
			this.$html = $('[data-id]').eq(0).clone();
			this.$html.append('<span class="del">删除</span>');
			console.log('Start Store Area:', this);
			
			if(this.store_address.length > 0){
				this.createLinkage(this.store_address[0] ? this.store_address[0].split('-') : []);
				for(var i in this.store_address){
					if(i == 0) continue;
					_this.createHtml(this.store_address[i]);
				}
			} else {
				this.createLinkage();
			}
			
			$('#add_store').click(function(){
				_this.createHtml();
			});
			
			//删除
			$('#store_area').on('click', '.del', function(){
				let $p = $(this).parents('[data-id]'),
					id = $p.data('id');
				$p.remove();
				$('[data-inputid='+id+']').remove();
			})
		},
		createHtml(val){
			let $box = this.$html.clone();
			$box.attr('data-id', ++this.id);
			$('#store_area').append($box);
			//console.log('val:', val);
			this.createLinkage(val ? val.split('-') : []);
		},
		createLinkage(defaultValue = []){
            // console.log('defaultValue:', defaultValue);
			$('[data-id='+this.id+']').linkage({
				doms: ['[data-name=province]', '[data-name=city]', '[data-name=district]', '[data-name=street]'],
				list: level_street,
				labelKey: 'text',
				valueKey: 'text',
				defaultValue: defaultValue,
				updateAfter(){
					console.log('after:', this);
					let _this = this,
						res = [],
						id = this.ele.parents('[data-id]').data('id');
					this.doms.map(classname => {
						res.push($('[data-id=' + id + ']').find(classname).val())
					});
					$('[data-inputid='+id+']').val(res.join('-'));
					//console.log('res:', res);
				}
			});
			$('#store_area').after('<input type="hidden" data-inputid="' + this.id + '" name="store_address[]" value="'+(defaultValue ? defaultValue.join('-') : '')+'" />');
		}
	};
	window.store_area = store_area;
	store_area.init();
</script>
</body>
</html>